<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px solid orange;
				width: 98%;
				margin: auto;
				border-collapse: collapse;
			}

			th {
				border: 1px solid orange;
				padding: 10px;
			}

			td {
				border: 1px solid orange;
				padding: 10px;
			}

			a {
				text-decoration: none;
			}
		</style>
		<script type="text/javascript">
			//页面加载事件
			window.addEventListener('DOMContentLoaded', function() {
				//获取所有的+节点对象(数组)
				const inc = document.querySelectorAll('.inc');
				// inc.forEach(function(val){})
				inc.forEach(val => {
					val.addEventListener('click', function(e) {
						//取消默认行为
						e.preventDefault();
						//--------------数量增-------------------------
						const input = this.previousElementSibling;
						input.value = parseInt(input.value) + 1;
						//--------------小计-------------------------
						//+节点对象的父
						const aParent = this.parentElement;
						//+节点对象的父的上一个兄弟
						const aParentSibling = aParent.previousElementSibling;
						//+节点对象的父的上一个兄弟的内容
						let price = aParentSibling.innerHTML;
						price = Number.parseInt(price.substring(1));
						//小计
						let pSum = price * Number.parseInt(input.value);
						//+节点对象的父的下一个兄弟
						const aParentNextSibling = aParent.nextElementSibling;
						aParentNextSibling.innerHTML = "￥" + pSum;
					})
				})

				//---------------------统计已选0件商品和总价--------------------------

				//获取所有的checkbox节点对象
				const check = document.querySelectorAll('.check');
				//遍历，注册鼠标点击事件
				check.forEach(val => {
					val.addEventListener('click', function(e) {
						let totalNum = 0;
						let totalPrice = 0;
						//遍历，判断被选中的商品
						check.forEach(val => {
							if (val.checked) {
								//-------------------已选商品数量----------------------------------------------
								//选中的checkbox节点对象的父
								const checkParent = val.parentElement;
								//选中的checkbox节点对象的父的下一个兄弟
								const checkParentNextSibling = checkParent.nextElementSibling
									.nextElementSibling.nextElementSibling;
								//选中的checkbox节点对象的父的下一个兄弟的所有子
								const child = checkParentNextSibling.children;
								//所有子中的input子
								const input = child[1];
								let num = input.value;
								totalNum = totalNum + Number.parseInt(num);
								//-------------------商品总价----------------------------------------------
								const tdPrice = checkParent.nextElementSibling
									.nextElementSibling.nextElementSibling.nextElementSibling;
								let price = tdPrice.innerHTML;
								price = price.substring(1);
								totalPrice = totalPrice + Number.parseInt(price);
							}
						})
						const totalNumTd = document.querySelector('.totalNum');
						totalNumTd.innerHTML = `已选${totalNum}件商品`;
						const totalPriceTd = document.querySelector('.totalPrice');
						totalPriceTd.innerHTML = `总价￥${totalPrice}`;
					})
				})
			})
		</script>
	</head>
	<body>
		<table>
			<tr>
				<th>全选</th>
				<th>商品</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="check"></td>
				<td>奔驰4600</td>
				<td>￥1000</td>
				<td><a href="#" class="dec">-</a><input type="text" value="1"><a href="#" class="inc">+</a></td>
				<td>￥1000</td>
				<td>删除</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="check"></td>
				<td>奥迪a8</td>
				<td>￥1000</td>
				<td><a href="#" class="dec">-</a><input type="text" value="1"><a href="#" class="inc">+</a></td>
				<td>￥1000</td>
				<td>删除</td>
			</tr>
			<tr>
				<td colspan="3" class="totalNum">已选0件商品</td>
				<td colspan="3" class="totalPrice">总价￥10000</td>
			</tr>
		</table>
	
	</body>
</html>
